<script setup lang="ts">
    import moment from 'moment';
import { toRefs } from 'vue';
    // import { UserInfo } from '@/services/type';

    // 属性
    let props = defineProps({
        visible: {
            type: Boolean,
            default: false
        },
        userInfo: {
            type: Object,
            default: {}
        }
    });
    let { visible } = toRefs(props);

</script>
<template>
    <el-dialog v-loading="true" v-model="visible" width="500" draggable :lock-scroll="false" :close-on-click-modal="false" :show-close="false">
        <template #header="{ close }">
            <div class="user-info-header">
                <div class="user-info-icon">
                    <img src="@/assets/image/user-icon.jpg" />
                </div>
                <div class="user-info-main-right">
                    <div class="close-box">
                        <el-icon class="el-icon-close" @click="close"><Close /></el-icon>
                    </div>
                </div>
                <div class="user-info-main-on">
                    <span class="user-info-name"><a :href="'/u/' + userInfo.yhnm" target="_blank">{{ userInfo.nickName }}</a></span>
                </div>
                <div class="user-info-main-down">
                    <span class="user-info-content">{{ userInfo.signature ? userInfo.signature : '这家伙很懒，什么都没有写...' }}</span>
                </div>
            </div>
        </template>
        <div class="detail">
            <el-form label-width="90px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="注册时间：">{{ userInfo.regTime ? moment(userInfo.regTime).format("YYYY-MM-DD HH:mm:ss") : "未知" }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="最后登录：">{{ userInfo.loginTime ? moment(userInfo.loginTime).format("YYYY-MM-DD HH:mm:ss") : "未知" }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="性别：">{{userInfo.sex ? (userInfo.sex === '0' ? '男' : '女') : "未设置"}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="QQ：">{{ userInfo.qq ? userInfo.qq : "未知" }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="微信：">{{ userInfo.weixin ? userInfo.weixin : "未知" }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="出生日期：">{{ userInfo.birthday ? userInfo.birthday : "未知" }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="个人网站：">
                            <template v-if="userInfo.webSiteName">
                                <a :href="userInfo.webSiteUrl" target="_blank">{{ userInfo.webSiteName }}</a>
                            </template>
                            <template v-if="!userInfo.webSiteName">
                                未知
                            </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="居住地：">{{ userInfo.address ? userInfo.address : "未知" }}</el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </el-dialog>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />